<template>
    <div class="app_data">
        <div class="title">
            <h2>城市不同面积租房房价分布散点图</h2>

        </div>
        <div class="query-c">
            <Form inline>
                <FormItem prop="user">
                    <Select v-model="searchParams.city" style="width:200px" placeholder="请选择城市">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit()">搜索</Button>
                </FormItem>
            </Form>
        </div>
        <div class="update">
            <div id="main" style="width: 100%; height: 500px"></div>
        </div>

    </div>
</template>
<script>
import {areaRent, getDict} from "../api";

export default {
    name: 'hello',
    data() {
        return {
            data:[],
            searchParams:{
                city:''
            },
            cityList:[]
        }
    },
    mounted() {
        this.init()
        this.getDict() ;
    },
    methods: {
        handleSubmit() {
            this.init();
        },

        async getDict() {
            const res = await getDict()
            res.info.forEach(item => {
                const city = {}
                city.value = item.city_code
                city.label = item.city_name
                this.cityList.push(city)
            })
        },

        async init() {
            this.data = []
            const res = await areaRent(`city_code=${this.searchParams.city}`);
            res.info.forEach(item =>{
                const dataC = []
                dataC.push(item.size)
                dataC.push(item.rent)
                this.data.push(dataC)
            })
            this.drawChart();
        },

        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));

            var myColor = [
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
                "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6",
            ];

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: "10%",
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {},
                yAxis: {


                },
                series: [
                    {
                        symbolSize: 20,
                        data: this.data,
                        type: 'scatter'
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // 跟着缩放
            window.addEventListener('resize', function () {
                // 让我们的图表调用 resize这个方法
                myChart.resize();
            });
        }
    }
}

</script>
<style>
.app_data {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 0 200px;
    font-family: "Open Sans", sans-serif;
    color: #444;
}

.title {
    margin: 4px auto;
    padding: 30px;
    text-align: center;
}

.title h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #5c768d;
}

.title span {
    font-size: 16px;
    color: #444;
    font-family: "Open Sans", sans-serif;
}

.update {
    background: #f5f9fc;
}
</style>
